<template>
  <div>
    <ul>
      <li v-for="m in messageList" :key="m.id">
          <!-- params参数to的字符串写法 -->
          <!-- <router-link :to="`/home/message/detal/${m.id}/${m.titel}`">{{m.titel}}</router-link>&nbsp;&nbsp; -->
           <!-- params参数to的对象写法 -->
            <router-link 
            :to="{//params只能用name不能用path
              name:'detal',
              params:{
                  id:m.id,
                  titel:m.titel
              }
            }">
            {{m.titel}}
            </router-link>&nbsp;&nbsp;
          </li>
    </ul>
    <hr/>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Message",
  data(){
      return{
          messageList:[
              {id:'001',titel:'message001'},
              {id:'002',titel:'message002'},
              {id:'003',titel:'message003'},
          ]
      }
  }
};
</script>

<style>
</style>